<template>
  <div>

    <div class="list">
      <div v-for='(item,index) in charts' :key="index">
        <div :class="item.nickName==nickName?'right':'left'">
          {{item.nickName!=nickName?item.nickName+':':''}}{{item.message}}{{item.nickName==nickName?':'+item.nickName:''}}
        </div>
      </div>
    </div>

    <textarea v-model="sendmsg"></textarea>

    <button @click="send">发消息</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        nickName: window.nickName,
        charts: [],
        sendmsg: "",
        res: ""
      }
    },
    mounted() {
      // 初始化
      this.init()
    },
    methods: {
      init: function () {
        if (typeof (WebSocket) === "undefined") {
          alert("您的浏览器不支持socket")
        } else {
          // 实例化socket
          this.socket = window.lfdChart
          // 监听socket连接
          this.socket.onopen = this.open
          // 监听socket错误信息
          this.socket.onerror = this.error
          // 监听socket消息
          this.socket.onmessage = (data) => {
            let res = JSON.parse(data.data)
            this.charts.push({
              nickName: res.nickName,
              message: res.message
            })
          }
        }
      },
      open: function () {
        console.log("socket连接成功")
      },
      error: function () {
        console.log("连接错误")
      },
      send: function () {
        // this.charts.push(JSON.parse(JSON.stringify({
        //   nickName: this.nickName,
        //   message: JSON.stringify(this.sendmsg)
        // })))
        this.socket.send(JSON.stringify(this.sendmsg))
        this.sendms = ""
      },
      close: function () {
        console.log("socket已经关闭")
      }
    },
    destroyed() {
      // 销毁监听
      this.socket.onclose = this.close
    }
  }
</script>

<style lang="css" scoped>
  .left {

    text-align: left;
    max-width: 100%;
  }

  .right {
    max-width: 100%;
    text-align: right;
  }
</style>